<template>
	<view class="search_box df-between">
		<view class="left">
			<uni-search-bar placeholder="请输入成员名称/手机号" bgColor="#fff" :radius="30" cancelButton="none" class="input"
				v-model="data.name" @confirm="search" />
		</view>
		<view class="right">
			<Calendar :date="date" @getDate="getDate"/>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		toRefs
	} from 'vue'
	import Calendar from '@/components/calendar/index.vue'

	const props = defineProps({
		data: {
			typr: Object,
			default: () => ({
				name: '',
				time: ''
			})
		}
	})
	const {
		data
	} = toRefs(props)
	const emits = defineEmits(['getQueryParams'])
	const date = ref()
	const getDate = (val) => {
		date.value = val
		console.log(data.value, '---', val);
	}
	const search = (res) => {
		data.value.time = date.value
		emits('getQueryParams', data.value)
		uni.showToast({
			title: '搜索：' + data.value.name + '时间：' + data.value.time,
			icon: 'none'
		})
	}
</script>

<style lang="scss" scoped>
	.search_box {
		&>.left {
			flex: 1;

			&:deep(.uni-searchbar) {
				padding-left: 0;
			}

			&:deep(.uni-searchbar__box) {
				border: 1px solid #CCCCCC;
			}
		}
	}
</style>